<template>
	<view class="container">
		<view class="bc_fff">
			<u--form labelPosition="left" labelWidth="192rpx" :labelStyle="{paddingLeft: '32rpx'}" :model="form"
				:rules="rules" ref="uForm">
				<u-form-item label="收货人" prop="realName" borderBottom>
					<u--input v-model="form.realName" maxlength="10" placeholderStyle="color: #999;" placeholder="请输入姓名"
						border="none" @input="handleInput" />
				</u-form-item>
				<u-form-item label="联系电话" prop="phone" borderBottom>
					<u--input v-model="form.phone" maxlength="11" placeholderStyle="color: #999;" placeholder="请输入联系电话"
						type="numebr" border="none" />
				</u-form-item>
				<u-form-item label="所在地区" prop="address" borderBottom>
					<view :class="[areaClass]">
						<PickerAddress :site="siteInfo" @change="change">{{form.address}}</pickerAddress>
					</view>
				</u-form-item>
				<u-form-item label="详细地址" prop="detail" borderBottom>
					<u--input v-model="form.detail" maxlength="50" placeholderStyle="color: #999;" placeholder="请输入详细地址"
						border="none" />
				</u-form-item>
			</u--form>
		</view>
		<view class="bc_fff mt_24">
			<u-cell-group>
				<u-cell title="设为默认地址">
					<view slot="right-icon">
						<!-- <checkbox-group @change="handleChange">
							<label class="fx aic">
								<checkbox style="transform: scale(0.7);" color="#FE5A1C" :value="form.isDefault"
									:checked="form.isDefault==1" />
							</label>
						</checkbox-group> -->
						<u-checkbox-group v-model="isDefault" shape="circle">
							<u-checkbox activeColor="#F08519" name="1"></u-checkbox>
						</u-checkbox-group>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="mt_88 plr_16">
			<button class="custom_btn primary w100 lh_40 br_56 fz_14 fb" @click="handleAdd">立即保存</button>
		</view>
	</view>
</template>

<script>
	import api from '@/service/config/api.js'
	import PickerAddress from '../components/PickerAddress.vue'
	import dataMixin from '@/mixins/data.js'
	export default {
		mixins: [dataMixin],
		components: {
			PickerAddress
		},
		data() {
			return {
				siteInfo: '',
				txt: '省，市，区',
				form: {
					realName: '', // 收货人姓名
					phone: '', // 收货人电话
					province: '', // 省
					city: '', // 市
					district: '', // 区
					address: '省，市，区',
					detail: '', // 详细地址
					isDefault: 0, // 是否默认
				},
				rules: {
					'realName': {
						type: 'string',
						required: true,
						message: '请输入收货人姓名',
						trigger: ['blur', 'change']
					},
					'phone': [{
							required: true,
							message: '请输入联系电话',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'detail': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					'address': {
						message: '请选择所在地区',
						// 自定义验证函数，见上说明
						asyncValidator: (rule, value, callback) => {
							console.log('value---', value)
							if (value !== '省，市，区') {
								callback()
							} else {
								callback(new Error('请选择所在地区'))
							}
						},
					},
				},
				updateUrl: '/user/api/UserAddress',
				params: {},
				isDefault: [],
				cityInfo: {}, // 城市信息
			};
		},
		computed: {
			areaClass() {
				return this.form.address === '省，市，区' ? 'area_placholder' : ''
			}
		},
		onLoad(options) {
			if (options.id) {
				uni.setNavigationBarTitle({
					title: '编辑地址'
				})
				this.id = options.id
				this.getDetail()
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			getDetail() {
				this.$utils.loading()
				api.get('/user/api/UserAddress/' + this.id).then(res => {
					if (res.data) {
						const {
							province,
							city,
							district
						} = res.data
						this.form = {
							...res.data,
							address: `${province} ${city} ${district}`
						}
						this.isDefault = res.data.isDefault ? ['1'] : []
					}
				})
			},
			handleAdd() {
				this.$refs.uForm.validate().then(res => {
					const params = {
						...this.form,
						cityId: this.cityInfo.cityId,
						longitude: this.cityInfo.lng,
						latitude: this.cityInfo.lat,
						isDefault: this.isDefault.length
					}
					if (this.id) {
						this.params = params
						return this.updateData(1)
					}
					this.$utils.loading()
					const {
						address,
						...params1
					} = params
					api.post('/user/api/UserAddress', {
						...params1
					}).then(res => {
						uni.hideLoading()
						uni.navigateBack()
						console.log(res)
					})
				})
			},
			handleChange() {
				console.log(this.form)
				this.form = {
					...this.form,
					isDefault: this.form.isDefault == 0 ? 1 : 0
				}
			},
			change(data) {
				this.form = {
					...this.form,
					address: data.data.join(' ')
				}
				this.cityInfo = data.city;
				const [province, city, area] = data.data;
				this.form.province = province
				this.form.city = city
				this.form.district = area
			},
			handleInput(value) {
				this.form.realName = value.replace(/\s+/g, '')
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-slot-title {
		display: table;

		text {
			display: table-cell;
		}
	}

	.area_placholder {
		/deep/picker {
			color: #999 !important;
		}
	}
</style>